{% extends 'base.html' %}

{% block content %}
<div class="max-w-[1440px] mx-auto px-6 relative min-h-[calc(100vh-100px)] overflow-hidden">
    <div id="stars" class="absolute inset-0 overflow-hidden"></div>

    <div class="flex flex-col items-center justify-center min-h-[calc(100vh-300px)]">
        <div class="text-center z-10">
            <div class="w-[300px] h-[300px] relative mx-auto mb-8">
                <img src="{{ url_for('static', filename='img/girl.jpg') }}"
                     class="w-full h-full object-cover float"
                     alt="睡觉的少女">
            </div>

            <h1 class="text-4xl font-bold text-primary mb-4 tracking-wider">折寿中...</h1>
            <p class="text-gray-500 text-xl mb-8">{{ error_message }}～</p>

            <div class="flex justify-center gap-6">
                <button onclick="window.location.href = '{{ url_for('user.index') }}'"
                        class="bg-secondary text-primary px-8 py-3 !rounded-button hover:opacity-90 transition-opacity whitespace-nowrap flex items-center">
                    <i class="fas fa-home mr-2"></i>
                    返回首页
                </button>
            </div>
        </div>
    </div>

    <div class="absolute bottom-4 text-center w-full left-0 text-gray-400">
        <p>今天也要开开心心的呢 ❤️</p>
    </div>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        function createStar() {
            const star = document.createElement('div');
            star.className = 'star text-primary';
            star.innerHTML = '<i class="fas fa-star"></i>';

            const size = Math.random() * 20 + 10;
            star.style.fontSize = `${size}px`;

            const x = Math.random() * window.innerWidth;
            const y = Math.random() * window.innerHeight;
            star.style.left = `${x}px`;
            star.style.top = `${y}px`;

            document.getElementById('stars').appendChild(star);

            setTimeout(() => {
                star.classList.add('visible');
            }, 100);

            setTimeout(() => {
                star.remove();
            }, 5000);
        }

        setInterval(createStar, 1000);

        document.querySelector('img').addEventListener('click', function() {
            this.style.transform = 'scale(1.1)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 200);
        });
    </script>
{% endblock %}